<template>
       <div id="container" :style="{textAlign: 'center'}">
        <p>测试redis存储短信验证码</p>
        <br>
        <input type="text" v-model="phone" placeholder="输入手机号">
        <button id="getSms" @click="getSms">获取短信验证码</button>
        <br><br>
        <input type="text" v-model="smsCode" placeholder="输入验证码">
        <button id="validateSms" @click="validateSms">校验短信验证码</button>
    </div>
</template>

 <script>
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8000'  
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem("token") || "" 
axios.defaults.headers.post['Content-Type'] = 'application/json'


 export default {
     name:'HelloWorld',
     data(){
         return{
             phone:'',
             smsCode:''
         }
     },
     methods:{
         getSms(){
              console.log("获取短信验证码")
            if(!this.phone){
                alert("请输入手机号")
                return
            }
            axios.get('/test_sms_code/',{params:{phone:this.phone}},)
            .then(res=>{
                if(res.data.code == 200){
                    alert(res.data.msg + res.data.smsCode)
                }else{
                    alert(res.data.err)
                }
            }).catch(err=>{
                return Promise.reject(err)
            })
         },
         validateSms(){
             console.log("验证短信验证码")
        if(!this.smsCode){
            alert("请输入短信验证码")
            return
        }
        // 请求后端进行 验证码校验
        axios.post("/test_sms_code/",
          {
            phone: this.phone, 
            smsCode: this.smsCode,
          }).then(res => {
            console.log("校验的响应:", res)
            if(res.data.code==200){
                alert(res.data.msg)
            }else{
                alert(res.data.msg)
            }
        }).catch(err => {
            return Promise.reject(err)
        })
         }
     }
 }
 </script>